<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情页面</title>
    <!-- 引入外部插件 -->
    <link rel="stylesheet" type="text/css" href="../lib/ByThePlugin/styles/slider.css" />
    <!-- 引入重置样式 -->
    <link rel=stylesheet href="../css/normalize.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入当前样式 -->
    <link rel="stylesheet" href="../css/product_details.css">
    <!-- 引入放大镜样式 -->
    <link rel="stylesheet" href="../css/magnifier.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header clearfix">
        <div class="container-fluid  container-top">
            <div class="container ">
                <div class="head-top ">
                    <h1><a href="./index.html"><img src="../images/list_02.jpg" alt="乐购"></a></h1>
                    <p class="fl cn">legochina.cn</p>
                    <p class="fr">欢迎光临<a href="./index.html">乐购</a>，请&ensp; <a href="./register.html">登陆</a>\<a
                            href="./enroll.html">注册</a></p>
                </div>
                <div class="door">
                    <p class="fr order"><a href="./product_details.html">我的订单</a></p>
                    <p class="fr shop"><a class="shop-car" href="./shopp_car.html">购物车</a></p>
                    <form class="fr search" action="#">
                        <input class="search-text fl" type="text" placeholder="创意文学">
                        <input class="search-btn fl" type="submit" value="">
                    </form>
                </div>
                <div>
                    <ul class="fr head-nav">
                        <li><a href="./productlist.html">图书</a></li>
                        <li><a href="#">电子书</a></li>
                        <li><a href="#">原创文学</a></li>
                        <li><a href="#">服饰</a></li>
                        <li><a href="#">运动户外</a></li>
                        <li><a href="#">孕婴童</a></li>
                        <li><a href="#">家居</a></li>
                        <li><a href="#">创意文具</a></li>
                        <li><a href="#">地方特产</a></li>
                        <li><a href="#">海外购</a></li>
                        <li><a href="#">电器城</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 图书详情 -->
    <div class="books container">
        <p><span>图书</span> > 小说 > 情感/家庭/婚姻 > 博集天卷 > 她和他</p>
        <div class="book-car clearfix">

            <div class="book_pact fl">
                <div id="MagnifierWrap2">
                    <div class="MagnifierMain">
                        <img class="MagTargetImg" src="../images/userimg.jpg" data-src="../images/userimg-big.jpg">
                    </div>
                    <span class="spe_leftBtn">&lt;</span>
                    <span class="spe_rightBtn">&gt;</span>
                    <div class="spec-items">
                        <ul>
                            <li class="on"><img src="../images/userimg.jpg" data-lsrc="../images/userimg.jpg"
                                    data-maxSrc="../images/userimg-big.jpg"> </li>
                            <li><img src="../images/userimg3.jpg" data-lsrc="../images/userimg3.jpg"
                                    data-maxSrc="../images/userimg3-big.jpg"></li>
                            <li><img src="../images/userimg4.jpg" data-lsrc="../images/userimg4.jpg"
                                    data-maxSrc="../images/userimg4-big.jpg"></li>
                            <li><img src="../images/userimg.jpg" data-lsrc="../images/userimg.jpg"
                                    data-maxSrc="../images/userimg-big.jpg"></li>
                            <li><img src="../images/userimg2.jpg" data-lsrc="../images/userimg2.jpg"
                                    data-maxSrc="../images/userimg2-big.jpg"></li>
                            <li><img src="../images/userimg3.jpg" data-lsrc="../images/userimg3.jpg"
                                    data-maxSrc="../images/userimg3-big.jpg"></li>
                            <li><img src="../images/userimg4.jpg" data-lsrc="../images/userimg4.jpg"
                                    data-maxSrc="../images/userimg4-big.jpg"></li>
                            <li><img src="../images/userimg2.jpg" data-lsrc="../images/userimg2.jpg"
                                    data-maxSrc="../images/userimg2-big.jpg"></li>
                            <li><img src="../images/userimg3.jpg" data-lsrc="../images/userimg3.jpg"
                                    data-maxSrc="../images/userimg3-big.jpg"></li>
                            <li><img src="../images/userimg4.jpg" data-lsrc="../images/userimg4.jpg"
                                    data-maxSrc="../images/userimg4-big.jpg"></li>
                        </ul>
                    </div>
                </div>
                <p class="comm">商品编号：11950959</p>
            </div>
            <div class="particulars fr">
                <h3>她和他</h3>
                <p class="tyzdr">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                <p class="author">[法] 马克·李维 著；杨亦雨 译</p>
                <img class="hunzi" src="../images/03-pact06.jpg">
                <p class="kind clearfix"><span>种类选择：</span><span class="kinder active">平装版</span><span
                        class="kinder">精装版</span></p>
                <p><input class="num" type="text" value="1">
                    <span class="plus">+</span><span class="subtract">-</span>
                </p>
                <p class="car"><a href="./shopp_car.html">加入购物车</a></p>
                <p class="hint">温馨提示：支持7天无理由退货</p>
            </div>

        </div>
    </div>
    <!-- 人气单品 -->
    <div class="populae container">
        <div class="item">
            <h2>人气单品</h2>
        </div>
        <ul class="menu clearfix">
            <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
        </ul>
        <div class="prod-foot clearfix">

            <ul class="fl">
                <p class="fl">看了又看</p>
                <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
            </ul>
            <div class="fr prodrg">
                <div class="clearfix">
                   <p class="active ">商品介绍</p><p>商品介绍</p>
                </div>
                <ul class="on">
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                </ul>
                <ul>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../images/04-购物车-7.jpg" alt=""></a></li>
                </ul>

            </div>
        </div>
        <div>
            <img src="../images/list-moshou.jpg">
        </div>
    </div>

    <!-- 尾部 -->
    <div class="footer">
        <div class="foot-top">
            <div class="sfgd">
                <ul>
                    <li><a href="#"><img src="../images/222_11.png" alt=""></a></li>
                    <li><a href="#"><img src="../images/222_13.png" alt=""></a></li>
                    <li><a href="#"><img src="../images/222_15.png" alt=""></a></li>
                    <li><a href="#"><img src="../images/222_17.png" alt=""></a></li>
                </ul>
            </div>
        </div>
        <div class="foot container">
            <div class="foot-ct ">
                <ul class="clearfix">
                    <li>
                        <p><a href="#">购物指南</a></p>
                        <p><a href="#">购物流程</a></p>
                        <p><a href="#">发票制度</a></p>
                        <p><a href="#">账户管理</a></p>
                        <p><a href="#">会员优惠</a></p>
                    </li>
                    <li>
                        <p><a href="#">订单服务</a></p>
                        <p><a href="#">订单配送查询</a></p>
                        <p><a href="#">订单状态说明</a></p>
                        <p><a href="#">自助取消订单</a></p>
                        <p><a href="#">自助修改订单</a></p>
                    </li>
                    <li>
                        <p><a href="#">支付方式</a></p>
                        <p><a href="#">货到付款</a></p>
                        <p><a href="#">网上支付</a></p>
                        <p><a href="#">礼品卡支付</a></p>
                        <p><a href="#">银行转帐</a></p>
                    </li>
                    <li>
                        <p><a href="#">退换货</a></p>
                        <p><a href="#">退换货政策</a></p>
                        <p><a href="#">自助申请退换货</a></p>
                        <p><a href="#">退换货进度查询</a></p>
                        <p><a href="#">退款方式和时间</a></p>
                    </li>
                    <li>
                        <p><a href="#">商家服务</a></p>
                        <p><a href="#">商家中心</a></p>
                        <p><a href="#">运营服务</a></p>
                        <p><a href="#">加入尾品汇</a></p>
                    </li>
                </ul>
                <div class="foot-btm clearfix">
                    <p>
                        <a href="#">公司简介</a>
                        <a href="#">Investor Relations</a>
                        <a href="#"> 网站联盟</a>
                        <a href="#">乐购招商</a>
                        <a href="#">机构销售</a>
                        <a href="#"> 手机乐购</a>
                        <a href="#">官方Blog</a>
                        <a href="#">热词搜索</a>
                    </p>

                </div>
                <p class="ment">Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
            </div>
            <div class="loge-btm"><img src="../images/logo_00.png" alt=""></div>

        </div>

    </div>

    <!-- 引出js交互 -->
    <script src="../lib/ByThePlugin/javascripts/jquery-1.11.0.js"></script>
    <script src="../lib/ByThePlugin/javascripts/slider.js"></script>
    <script src="../js/product_details.js"></script>
    <script src="../lib/magnifier.js"></script>
</body>

</html>